<template>
  <div class="container m-2 shadow rounded">
    <div class="bg-primary p-2 d-flex justify-content-between align-items-center">
      <span class="text-white">订单详细</span>
    </div>
    <div class="p-2">
      <Form :label-width="80">
        <Row class="w-100">
          <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <FormItem class="w-50" label="订单编号">
              <Input v-model="order.orderid" disabled></Input>
            </FormItem>
          </Col>
          <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <FormItem class="w-50" label="门店id">
              <Input v-model="order.storeid" disabled></Input>
            </FormItem>
          </Col>
          <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <FormItem class="w-50" label="客户id">
              <Input v-model="order.clientid" disabled></Input>
            </FormItem>
          </Col>
          <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <FormItem class="w-50" label="客户姓名">
              <Input v-model="order.clientName" disabled></Input>
            </FormItem>
          </Col>
          <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <FormItem class="w-50" label="商品名称">
              <Input v-model="order.productName" disabled></Input>
            </FormItem>
          </Col>
          <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <FormItem class="w-50" label="商品价格">
              <Input v-model="order.productPrice" disabled></Input>
            </FormItem>
          </Col>
          <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <FormItem class="w-50" label="数量">
              <Input v-model="order.count" disabled></Input>
            </FormItem>
          </Col>
          <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
            <FormItem class="w-50" label="实付款">
              <Input v-model="order.amount" disabled></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: {
        orderid: "",
        storeid: "",
        clientid: "",
        clientName: "",
        productName: "",
        productPrice: "",
        count: "",
        amount: "",
      },
    };
  },
  created() {
    // 从路由中获取传递的订单ID
    const orderId = this.$route.query.orderId;
    if (orderId) {
      this.loadData(orderId);
    } else {
      // 如果没有传递订单ID，可以做一些错误处理或跳转
      this.$router.push("/dd/list");
    }
  },
  methods: {
    // 加载订单详细信息
    loadData(orderId) {
      this.http.get({
        url: "/dd/info",
        param: { orderid: orderId },
      }).then(res => {
        this.order = res; // 假设接口返回的数据直接赋值给 order 对象
      });
    },
  },
};
</script>

<style scoped>
</style>
